<template>
  <div>
    <h1>薪资：{{ salary }}</h1>
    <h2>
      工龄：{{ workAge1 }}
      <button @click="workAge++">点击增加工龄</button>
    </h2>
    <h3>
      等级：{{ lev }}
      <button @click="updeteLev">点击提升等级</button>
    </h3>

    <hr />
    <h2>{{ num1 }} <button @click="num1++">自增</button></h2>
    <h2>{{ num2 }} <button @click="num2++">自增</button></h2>
    <h2>{{ number }}</h2>
    <h1>{{l}}</h1>
  </div>
</template>
<script setup>
import { watchEffect, ref, reactive, readonly,shallowReadonly,toRef} from "vue";

const salary = ref(10);
const num1 = ref(10);
const num2 = ref(20);
const number = ref(30);

const info = 
   reactive({
  workAge: 0,
  title: {
    name: "教授",
    lev: 1,
    sum:{
        um:10,
        mum:{
            l:10
        }
    }
  },
})
const l=toRef(info.title.sum.mum,'l')
const workAge=toRef(info,'workAge')


const workAge1=ref(info.workAge)

const lev=toRef(info.title,'lev')

// 更新info数据
function updeteLev() {
  lev.value++;

  console.log(workAge,workAge1);
}

const a = watchEffect(
  () => {
    salary.value = 10 + workAge1.value * 0.1 + (lev.value - 1) * 0.5;
    number.value = num1.value + num2.value;
  },

);

setInterval(() => {
  a();
}, 5000);
</script>